<template>
  <div class="container">
    <div>鼠标位置：</div>
    <div>X轴：{{ x }}</div>
    <div>Y轴：{{ y }}</div>
    <hr />
    <div>{{ count }} <button @click="add">自增</button></div>
  </div>
</template>
<script>
/*
1:鼠标移动
   1：定义响应式数据
   2:加入鼠标移动监听事件，实时修改响应式数据值为鼠标坐标
   3：销毁时做善后处理（移除监听事件）
2：自增
   1：定义响应式数据
   2：绑定事件处理自增
*/
// import { reactive, toRefs, onMounted, onBeforeUnmount } from 'vue'
import { toRefs } from 'vue'
import { mouseFn, addFn } from './composition/app.js'
export default {
  name: 'App',
  setup () {
    //   自增
    const { add, state } = addFn()
    // 鼠标移动
    const mouse = mouseFn()
    return { ...toRefs(state), add, ...toRefs(mouse) }
  }
  //   data () {
  //     return {
  //       x: 0,
  //       y: 0,
  //       count: 0
  //     }
  //   },
  //   mounted () {
  //     document.addEventListener('mousemove', this.move)
  //   },
  //   methods: {
  //     move (e) {
  //       this.x = e.pageX
  //       this.y = e.pageY
  //     },
  //     add () {
  //       this.count++
  //     }
  //   },
  //   destroyed () {
  //     document.removeEventListener('mousemove', this.move)
  //   }
}
</script>
